<template>
	<view>
		<form @submit="onSubmit">
		<view>
		  <view>单号:</view>
		  <input type="text" name="formCode" v-model="formData.formCode" placeholder="请输入单号" />
		</view>
		
		<view>
		  <view>站点:</view>
		  <input type="text" name="station" v-model="formData.station" placeholder="请输入站点" />
		</view>
		
		<view>
		  <view>区间:</view>
		  <input type="text" name="segment" v-model="formData.segment" placeholder="请输入区间" />
		</view>
		
		<view>
		  <view>故障类型:</view>
		  <input type="text" name="faultType" v-model="formData.faultType" placeholder="请输入故障类型" />
		</view>
		
		<view>
		  <view>故障描述:</view>
		  <input type="text" name="faultDescription" v-model="formData.faultDescription" placeholder="请输入故障描述" />
		</view>
		
		<view>
		  <view>接收人:</view>
		  <input type="text" name="acceptBy" v-model="formData.acceptBy" placeholder="请输入接收人" />
		</view>
		
		<view class="uni-title uni-common-pl" >专业：</view>
		<view >
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange1" :value="index1" :range="array1" v-model="formData.major" name="major">
						<view class="uni-input">{{array1[index1]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" >线路：</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" v-model="formData.line" name="line">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view>
		  <view>处理情况:</view>
		  <input type="text" name="process" v-model="formData.process" placeholder="请输入处理情况" />
		</view>
		
		<view style="border: 1rpx solid darkgray; display: flex; align-items: center;">
		  <view style="margin: 10px;">现场照片</view>
		  <view style="flex: 1;"></view> <!-- 占位符，将按钮推到右边 -->
		  <view class="example-body" style="display: flex; align-items: center;">
		    <uni-file-picker limit="9" file-mediatype="photo"></uni-file-picker>
		  </view>
		</view>
			
		<view class="uni-title uni-common-pl" >抢修结束时间:</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate"  @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view>
		  <view>状态:</view>
		  <input type="text" name="status" v-model="formData.status" placeholder="请输入状态" />
		</view>
		
		<view>
		  <button form-type="submit" type="primary" >提交表单</button>
		  <button form-type="reset">重置表单</button>
		</view>
		
		</form>	
	</view>
</template>

<script>
	import axios from "axios"
	import { title } from "process";
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				
				date: currentDate,
				array1: ['变电','工务','通信','信号','接触轨'],
				index1: 0,
				array2: ['十七号线','十三号线'],
				index2: 0,
				setTime:null,
				formData: {
				        formCode: '',
				        station: '',
						segment: '',
						faultType: '',
						faultDescription: '',
						acceptBy: '',
						major: '',
						line: '',
						process: '',
						sitePhoto:'',
						repairEndTime:'',
						status:'',
				},
			}
		},
		computed: {
			        startDate() {
			            return this.getDate('start');
			        },
			        endDate() {
			            return this.getDate('end');
			        }
			    },
			methods: {
				bindPickerChange1: function(e) {
				            console.log('picker发送选择改变，携带值为', e.detail.value)
				            this.index1 = e.detail.value
							this.formData.major = this.index1
				        },
				bindPickerChange2: function(e) {
				           console.log('picker发送选择改变，携带值为', e.detail.value)
				           this.index2 = e.detail.value
						   this.formData.line = this.index2
						   console.log(this.formData);
				       },
				bindDateChange: function(e) {
					
				            this.date = e.detail.value
							this.formData.repairEndTime = this.date
				        },
				onSubmit(e) {
					uni.navigateTo({
						url:"/pages/EmergencyRepair/EmergencyRepair"
					})
				      e.preventDefault(); // 防止表单默认提交
					  console.log("test")
				      // console.log(e.target.detail.value);
				      // this.obj = e.target.detail.value;
					  axios.post("http://localhost:82/emergencyRepair/management",this.formData)
					  .then((data)=>{
						  console.log(data)
					  }).catch((err)=>{
						  console.log(err)
					  })
					  
				    },
				getDate(type) {
				            const date = new Date();
				            let year = date.getFullYear();
				            let month = date.getMonth() + 1;
				            let day = date.getDate();
				
				            if (type === 'start') {
				                year = year - 60;
				            } else if (type === 'end') {
				                year = year + 2;
				            }
				            month = month > 9 ? month : '0' + month;
				            day = day > 9 ? day : '0' + day;
				            return `${year}-${month}-${day}`;
				        }
			}
		}
</script>

<style>

</style>
